<template>
  <div class="pharmacy-container" v-loading="loading">
    <div class="main-content" v-if="activeTab != '' && activeTab != null">
      <!-- 左侧边栏 -->
      <aside class="sidebar">
        <!-- <div class="sidebar-tabs">
          <span
            class="tab-btn"
            :class="{ active: activeTab === 'dispense' }"
            @click="activeTabFun('dispense')"
            >配药</span
          >
          <span
            class="tab-btn"
            :class="{ active: activeTab === 'send' }"
            @click="activeTabFun('send')"
            >发药</span
          >
        </div> -->
        <div class="sidebar-tabs">
          <span
            class="tab-btn"
            :class="{ active: activeTab == item.perms }"
            @click="activeTabFun(item.perms)"
            v-for="(item, index) in menuItem"
          >
            {{ item.menuName }}</span
          >
        </div>

        <div class="search-bar">
          <el-input
            type="text"
            placeholder="搜索姓名/电话/身份证号/诊号"
            class="search-input"
            v-model="patientName"
            clearable
            @input="handleSearch"
            @clear="handleSearch"
          />
          <div
            @click="CustomDatePickerShow = !CustomDatePickerShow"
            class="register-date-box"
          >
            {{ formattedVisitDate }}
            <el-icon size="14"><CaretBottom /></el-icon>
          </div>
          <div class="register-date-custom-picker" v-if="CustomDatePickerShow">
            <DatePickerTime
              @change="CustomDatePickerChange"
              @update:modelValue="CustomDatePickerChange"
              :time="selectedDate"
            ></DatePickerTime>
          </div>
        </div>

        <div class="patient-list">
            <div class="patient-items" v-if="dispenseList.length > 0">
              <div
                class="patient-item"
                v-for="item in dispenseList"
                :key="item.orderId"
                :class="{ active: item.orderId === activeOrderId }"
                @click="onSelectOrder(item)"
              >
                <div class="patient-info">
                  <img
                    src="@/assets/pharmacy/man.png"
                    class="patient-icon"
                    v-if="item.patientGender === '1'"
                  />

                  <img
                    src="@/assets/pharmacy/woman.png"
                    alt=""
                    class="patient-icon"
                    v-else-if="item.patientGender == '2'"
                  />

                  <img
                    src="@/assets/pharmacy/icon_weizhi_nor.png"
                    class="patient-icon"
                    v-if="item.patientGender === '3'"
                  />

                  <span class="patient-name">{{ item.patientName }}</span>
                  <span
                    class="tag"
                    :class="item.dispenseStatus == '1' ? 'tag-icon' : ''"
                    v-if="activeTab === 'pharmacy-py'"
                    >{{
                      userEnums
                        .getEnumSelect('dispenseStatusEnum')
                        ?.find(
                          (target: any) =>
                            target.value?.toString() ===
                            item.dispenseStatus?.toString()
                        )?.text
                    }}</span
                  >

                  <span
                    class="tag"
                    :class="item.deliveryStatus == '1' ? 'tag-icon' : ''"
                    v-else
                  >
                    {{
                      userEnums
                        .getEnumSelect('deliveryStatusEnum')
                        ?.find(
                          (target: any) =>
                            target.value?.toString() ===
                            item.deliveryStatus?.toString()
                        )?.text
                    }}</span
                  >
                </div>

                <div
                  class="patient-ids"
                  v-if="activeTab === 'pharmacy-py' && item.diagnosisTime"
                >
                  <div class="patient-id">{{ item.visitNo }}</div>
                  <div class="patient-time">
                    {{ dayjs(item.diagnosisTime).format('HH:mm') }}
                  </div>
                </div>
                <div class="patient-ids" v-else>
                  <div class="patient-id">{{ item.visitNo }}</div>
                  <div class="patient-time">
                    {{ dayjs(item.dispenseTime).format('HH:mm') }}
                  </div>
                </div>
              </div>
            </div>
            <div class="patient-items"  style="padding: 0px;height: calc(100vh - 245px);;display: flex;justify-content: center; align-items: center;" v-else>
              <el-empty
                :image-size="100"  
                :image="emptyImage"
                description="暂无数据"
              />
            </div>
        </div>
      </aside>

      <!-- 右侧主体内容 -->
      <main class="content-area" v-if="activeOrderId && dispenseDetailBox == true" >
        <!-- {{ dispenseDetail }} -->
        <!-- 患者信息栏 -->
        <div class="patient-header">
          <div class="patient-basic">
            <div class="name">
              <img
                src="@/assets/pharmacy/man.png"
                class="patient-icon"
                v-if="dispenseDetail?.patientGender === '1'"
              />

              <img
                src="@/assets/pharmacy/woman.png"
                alt=""
                class="patient-icon"
                v-else-if="dispenseDetail?.patientGender == '2'"
              />

              <img
                src="@/assets/pharmacy/icon_weizhi_nor.png"
                class="patient-icon"
                v-if="dispenseDetail?.patientGender === '3'"
              />
              <span class="name-text">{{ dispenseDetail?.patientName }}</span>
            </div>
            <span class="gender">{{
              dispenseDetail?.patientGender === '1'
                ? '男'
                : dispenseDetail?.patientGender === '2'
                ? '女'
                : '未知'
            }}</span>
            <span class="id-number">{{ dispenseDetail?.patientPhone }}</span>
            <span class="age">
              <span class="age-number">{{ dispenseDetail?.ageYear }} 岁</span>
              <span class="age-month">{{ dispenseDetail?.ageMonth }} 月</span>
            </span>
            <span class="weight">{{ dispenseDetail?.weight || '-' }} kg</span>
            <span class="visit-id"
              >{{ dispenseDetail?.systolicBp || '-' }}/{{
                dispenseDetail?.diastolicBp|| '-'
              }}
              mmHg</span
            >
          </div>
          <div
            class="action-btn"
            v-btnPermission="'btn-pharmact-py'"
            @click="completeDispenseApi"
            v-if="
              activeTab == 'pharmacy-py' &&
              dispenseDetail?.dispenseStatus == '1'
            "
          >
            配药
          </div>
          <div class="action-btn2" v-if="activeTab == 'pharmacy-fy'">
            <div
              @click="rejectDeliveryApi(3)"
              v-btnPermission="'btn-pharmacy-reject'"
              v-if="dispenseDetail?.deliveryStatus == '1'"
            >
              驳回
            </div>
            <div
              @click="rejectDeliveryApi(2)"
              v-btnPermission="'btn-pharmacy-fy'"
              v-if="dispenseDetail?.deliveryStatus == '1'"
            >
              发药
            </div>
            <!-- <div
              v-if="dispenseDetail?.deliveryStatus == '2'"
              v-btnPermission="'btn-pharmacy-log'"
            >
              打印
            </div> -->
          </div>
        </div>

        <!-- 诊断信息 -->
        <section class="diagnosis-section">
          <h3>诊断</h3>
          <div class="diagnosis-info">
            <div class="item">
              <div class="info-row">
                <span class="label">最终诊断</span>
                <span class="value">{{ dispenseDetail?.diagnosis }}</span>
              </div>
              <div class="info-row">
                <span class="label">诊断时间</span>
                <span class="value">
                  {{
                    dayjs(dispenseDetail?.diagnosisTime).format(
                      'YYYY-MM-DD HH:mm:ss'
                    )
                  }}</span
                >
              </div>
            </div>

            <div class="item">
              <div class="info-row">
                <span class="label">诊断科室</span>
                <span class="value">{{ dispenseDetail?.deptName }}</span>
              </div>
              <div class="info-row">
                <span class="label">诊断医生</span>
                <span class="value">{{ dispenseDetail?.doctorName }}</span>
              </div>
            </div>
          </div>
        </section>

        <template v-for="rx in dispenseDetail?.rxList" :key="rx.rxId">
          <!-- 输液处方 -->
          <section class="prescription-section" v-if="rx.rxType === '2'">
            <transfusion
              :info="rx"
              :key="activeTab + '2'"
              :activeTab="activeTab"
              @closeDrawer="upDataChange"
            />
          </section>
          <!-- 中药处方 -->
          <section class="prescription-section" v-if="rx.rxType === '3'">
            <TcmPrescriptionBox
              :info="rx"
              :key="activeTab + '3'"
              :activeTab="activeTab"
              @closeDrawer="upDataChange"
            ></TcmPrescriptionBox>
          </section>
          <!-- 中西成药处方 -->
          <section class="prescription-section" v-if="rx.rxType === '1'">
            <drugPrescriptionTable
              :info="rx"
              :key="activeTab + '1'"
              :activeTab="activeTab"
              @closeDrawer="upDataChange"
            />
          </section>
        </template>
        <!-- <InspectorInfoBox></InspectorInfoBox> -->
      </main>
      <div
        v-else
        style="
          margin: 0 auto;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <el-empty
          :image-size="260"
          :image="emptyImage"
          description="暂无数据"
        />
      </div>
      <!-- 右侧信息栏 -->
      <div>
        <!-- 
         dispenseDetailBox == true
         -->
        <member-card   v-if="activeTab != ''"
          :key="activeTab"
          :patientId="patientId"
          :activeTab="activeTab"
          :patientDetail="dispenseHistoryList"
        />
      </div>
    </div>
    <div style="padding-top: 100px" v-else>
      <el-empty :image-size="500" :image="emptyImage" description="暂无权限" />
    </div>
    <auditExam
      ref="auditExamRef"
      @closeDrawer="getDispenseListData"
    ></auditExam>
  </div>
</template>

<script setup lang="ts">
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import {
  getDispenseList,
  getDeliveryList,
  getDeliveryDetail,
  getDispenseDetail,
  getDeliveryHistoryList,
  getDispenseHistoryList,
  completeDispense,
} from '@/api/pharmacy';
import type { DispenseList, DispenseDetail } from '~/types/pharmacy';
import dayjs from 'dayjs';
import { useBaseDataStore } from '@/store/basedata';
import type { DispenseHistory } from '~/types/dispenseHistory';
import auditExam from './common/auditExam.vue';
const auditExamRef = ref<InstanceType<typeof auditExam>>();
import MemberCard from './common/memberCard.vue';
import drugPrescriptionTable from './common/drugPrescriptionTable.vue';
import TcmPrescriptionBox from './common/TcmPrescriptionBox.vue';
import InspectorInfoBox from './common/InspectorInfoBox.vue';
import transfusion from './common/transfusion.vue';
import { CaretBottom } from '@element-plus/icons-vue';
const userEnums = useBaseDataStore();
const dispenseList = ref<DispenseList[]>([]);
const activeOrderId = ref<number>(-1);
const loading = ref<boolean>(false);
const dispenseDetail = ref<DispenseDetail>();
const dispenseHistoryList = ref<DispenseHistory[]>([]);
const activeCardId = ref<number>(-1);
const patientId = ref<number | null>(null); // 当前选中的患者ID
const patientDetail = ref<any | undefined>(undefined); // 当前选中的患者详情
const visitDate = ref<any>('');
const upData = ref<any>([]);
const selectedDate = ref('today');
const CustomDatePickerShow = ref<boolean>(false);
const route = useRoute();
const dispenseDetailBox = ref<any>(true);

import stores from '@/store';

let menuList = ref<any>(
  await stores.useBaseDataStore().findMenuList(route.query.menuId)
);

// //console.log(menuList.value, 'menuList.value');

const types = ref<string>(); // 默认选中标签
const activeTab = ref<any>();

let menuItem = ref<any>(
  menuList.value.filter((item: any) => item.menuType == 2)
);

if (menuItem.value.length > 0) {
  activeTab.value = menuItem.value[0].perms; // 默认选中标签
} else {
}

const activeTabFun = (id: any) => {
  activeTab.value = id;
  getDispenseListData();
};
const formattedVisitDate = computed(() => {
  const val = visitDate.value;
  if (!val) return '';
  const current = dayjs();
  const target = dayjs(val);
  if (!target.isValid()) return '';
  return target.isSame(current, 'day') ? '今天' : target.format('MM-DD');
});
const patientName = ref<string>('');
//配药 组件回调值
const CustomDatePickerChange = (date: any) => {
  // 为空直接关闭
  if (!date) {
    CustomDatePickerShow.value = false;
    return;
  }

  // 规范化为 YYYY-MM-DD 字符串
  const next = dayjs(date).isValid()
    ? dayjs(date).format('YYYY-MM-DD')
    : String(date);
  selectedDate.value = next;
  visitDate.value = next;
  // patientId.value = null;
  CustomDatePickerShow.value = false;
  handleSearch();
};
const upDataChange = (data: any) => {
  upData.value.forEach((item: any) => {
    if (item.rxId === data.rxId) {
      if (item.rxType === '1') {
        item.detailList = data.detailList;
      } else if (item.rxType === '2') {
        item.groupList = data.groupList;
      } else {
        item.tcmInfo = data.tcmInfo;
      }
    }
  });
};

// tab切换

const handleSearch = () => {
  dispenseDetailBox.value = false;
  if (menuItem.value.length > 0) {
    activeOrderId.value = 0;
    getDispenseListData();
  } else {
    dispenseDetail.value = undefined;
    activeOrderId.value = 0;
    dispenseHistoryList.value = [];
  }
};
const getDispenseListData = async () => {
  dispenseDetail.value = undefined;
  // activeOrderId.value = 0;
  dispenseHistoryList.value = [];
  if (activeTab.value == 'pharmacy-py') {
    // visitDate.value.value
    const res = await getDispenseList({
      patientName: patientName.value,
      visitDate: visitDate.value,
      pageNo: 1,
      pageSize: 10000,
    });

    if (res.code == '200') {
      dispenseList.value = res.data || [];
      if (dispenseList.value.length > 0) {
        if(activeOrderId.value){
          const exists = dispenseList.value.find(item => item.orderId === activeOrderId.value);
          if (exists) {
            onSelectOrder(exists);
          } else {
            onSelectOrder(dispenseList.value[0]!);
          }
        }else{
          onSelectOrder(dispenseList.value[0]!);
        }
      }
    } else {

     
    }
  } else {
    const res = await getDeliveryList({
      patientName: patientName.value,
      visitDate: visitDate.value,
      pageNo: 1,
      pageSize: 10000,
    });

    if (res.code == '200') {
      dispenseList.value = res.data || [];
      if (dispenseList.value.length > 0) {
        onSelectOrder(dispenseList.value[0]!);
      }
    } else {

      ElMessage({
        type: 'warning',
        message: res.msg,
      });
    }
  }

 
};

const getDispenseDetailData = async (orderId: number) => {
  try {
   
    upData.value = [];
    loading.value = true;

    if (activeTab.value == 'pharmacy-py') {
      const res = await getDispenseDetail({
        orderId,
      });

      if (res.code == '200' && res.data?.rxList) {
        for (let i = 0; i < res.data.rxList.length; i++) {
          upData.value.push({
            rxId: res.data.rxList[i]?.rxId,
            rxType: res.data.rxList[i]?.rxType,
          });
        }
        dispenseDetail.value = res.data;
        dispenseDetailBox.value = true;
        loading.value = false;
      } else {
        loading.value = false;
        
      }
    } else {
      const res = await getDeliveryDetail({
        orderId,
      });

      if (res.code == '200' && res.data?.rxList) {
        for (let i = 0; i < res.data.rxList.length; i++) {
          upData.value.push({
            rxId: res.data.rxList[i]?.rxId,
            rxType: res.data.rxList[i]?.rxType,
          });
        }
        dispenseDetail.value = res.data;
        dispenseDetailBox.value = true;

        loading.value = false;
      } else {
        loading.value = false;
       
      }
    }
  } catch (error) {
    //console.log(error);
        loading.value = false;

  } finally {
    loading.value = false;
  }
};

const getDispenseHistoryListApi = async (patientId: number) => {
  if (activeTab.value == 'pharmacy-py') {
    const res = await getDispenseHistoryList({
      patientId,
      pageNo: 1,
      pageSize: 10000,
    });

    if (res.code == '200') {
      dispenseHistoryList.value = res.data || [];
    } else {
      
    }
  } else {
    const res = await getDeliveryHistoryList({
      patientId,
      pageNo: 1,
      pageSize: 10000,
    });

    if (res.code == '200') {
      dispenseHistoryList.value = res.data || [];
    } else {
      
    }
  }
};

const onSelectOrder = (item: DispenseList) => {
  dispenseDetailBox.value = false;
  activeOrderId.value = item.orderId;
   getDispenseDetailData(item.orderId);
   getDispenseHistoryListApi(item.patientId);
 
};

//发药 驳回
const rejectDeliveryApi = async (type: any) => {
  auditExamRef.value?.open(type, activeOrderId.value);
};

//完成配药
const completeDispenseApi = async () => {
  ElMessageBox.confirm('是否确认配药已完成！', '操作', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async (e) => {
      if (e == 'confirm') {
        let upDatas = [];
        //console.log(upData.value);

        for (let index = 0; index < upData.value.length; index++) {
          let item = upData.value[index];
          if (item.rxType == '1' && item.detailList && item.detailList.length > 0) {
            upDatas.push(item);
          }
          if (item.rxType == '2'&& item.groupList && item.groupList.length > 0) {
            upDatas.push(item);
          }
          if (
            item.rxType == '3' &&
            item.tcmInfo &&
            item.tcmInfo.currentDispenseQty != '' &&
            item.tcmInfo.currentDispenseQty > 0
          ) {
            upDatas.push(item);
          }
        }

        let data = {
          rxList: upDatas,
          orderId: activeOrderId.value,
        };
        //console.log(data, '完成配药参数');

        const res = await completeDispense(data);
        if (res.code === '200') {
          ElMessage.success('完成配药成功');
          getDispenseListData();
        } else {
          //ElMessage.error(res.msg);
        }
      } else {
        return;
      }
    })
    .catch(() => {});
};
onMounted(() => {
  visitDate.value = dayjs().format('YYYY-MM-DD');
  handleSearch();
});
</script>
<style lang="scss">
.prescription-section {
  .el-checkbox__label {
    padding-left: 37px;
  }
}
</style>
<style lang="scss" scoped>
.pharmacy-container {
  .tag-icon {
    position: relative;
    color: #000 !important;
  }
  .register-date-custom-picker {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    padding: 8px 8px 4px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  .register-date-box {
    cursor: pointer;
    text-align: right;
    margin-left: auto;
    margin-right: 8px;
    margin-left: 10px;
  }
  :deep(.el-select__wrapper) {
    padding: 0;
    border: none;
    box-shadow: none;
  }
  :deep(.is-hovering) {
    box-shadow: none;
  }
  .tag-icon::before {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    left: -10px;
    top: 6px;
    background: #e37318;
    border-radius: 50%;
  }
  width: 100%;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  padding-right: 14px;
  .date-select {
    width: 48px;
    flex: 1;
    margin-left: auto;
  }
  // 主内容区
  .main-content {
    flex: 1;
    display: flex;
    overflow: hidden;

    // 左侧边栏
    .sidebar {
      width: 280px;
      height: 100%;
      background: white;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

      .sidebar-tabs {
        flex-shrink: 0;
        display: flex;
        gap: 24px;
        height: 52px;
        padding-left: 22px;
        border: 1px solid #e7e7e7;

        .tab-btn {
          cursor: pointer;
          font-weight: 400;
                font-size: 18px;

          color: rgba(0, 0, 0, 0.4);
          line-height: 52px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          position: relative;

          &.active {
            font-weight: 400;
                  font-size: 18px;

            color: #18b3ab;
            text-align: left;
            font-style: normal;
            text-transform: none;

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 3px;
              background: #18b3ab;
            }
          }
        }
      }

      .search-bar {
        flex-shrink: 0;
        padding: 10px ;
        display: flex;
        gap: 2px;
        align-items: center;
        position: relative;
        .search-input {
          flex: 1;
          width: 182px;
        }
        input {
          width: 182px;
          height: 32px;
          padding: 0px 8px;
          background: #ffffff;
          border-radius: 3px 3px 3px 3px;
          border: 1px solid #dcdcdc;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.9);

          &::placeholder {
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.2);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .search-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          height: 32px;
          margin-left: auto;
          cursor: pointer;

          .search-btn-text {
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 32px;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }

          .search-btn-icon {
            width: 17px;
            height: 16px;
          }
        }
      }

      .patient-list {
        width: 100%;
        height: calc(100% - 52px - 60px);
        .patient-items {
          height: 100%;
          overflow-y: auto;
          padding-left: 7px;
          padding-right: 9px;
        }

        .patient-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 5px;
          padding: 12px 16px;
          cursor: pointer;
          transition: background 0.2s;
          border: 1px solid transparent;

          &:hover,
          &.active {
            background: rgba(24, 179, 171, 0.1);
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #16ada4;
          }

          .patient-info {
            display: flex;
            align-items: center;
            width: 100%;

            .patient-icon {
              width: 16px;
              height: 16px;
              font-size: 16px;
            }

            .patient-name {
              padding-left: 5px;
              font-weight: 400;
              font-size: 15px;
              color: rgba(0, 0, 0, 0.9);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .tag {
              margin-left: auto;
              font-weight: 400;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: right;
              font-style: normal;
              text-transform: none;
            }
          }

          .patient-ids {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 21px;
            width: 100%;

            .patient-id {
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .patient-time {
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: right;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }

    // 右侧主体内容
    .content-area {
      flex: 1;
      padding: 12px 17px;
      overflow-y: auto;
      position: relative;

      // 患者信息栏
      .patient-header {
        border-radius: 6px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .patient-basic {
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0x 12px;
          background: white;
          border: 1px solid #dcdcdc;

          .name {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.9);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;

            .patient-icon {
              width: 16px;
              height: 16px;
            }
          }

          .gender {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.9);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;
          }

          .id-number {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;
          }

          .age {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;

            .age-number {
              padding-right: 12px;
            }
          }

          .weight {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;
          }

          .visit-id {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .action-btn2 {
          margin-left: auto;
          display: flex;
          > div {
            align-items: center;
            display: flex;
            justify-content: center;
            width: 52px;
            cursor: pointer;
            height: 32px;
            border-radius: 4px 4px 4px 4px;
            font-weight: 400;
            font-size: 14px;

            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          > div:nth-of-type(2) {
            background: #16ada4;
            margin-right: 10px;
            color: rgba(255, 255, 255, 0.9);
          }
          > div:nth-of-type(1) {
            background: #e37318;
            color: rgba(255, 255, 255, 0.9);
            margin-right: 10px;
          }
          > div:nth-of-type(3) {
            color: #16ada4;
            border: 1px solid #16ada4;
          }
        }
        .action-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 52px;
          cursor: pointer;
          height: 32px;
          background: #16ada4;
          border-radius: 4px 4px 4px 4px;
          font-weight: 400;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.9);
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      // 诊断信息
      .diagnosis-section {
        width: 100%;
        height: 120px;
        margin-bottom: 12px;
        border-radius: 12px 12px 12px 12px;
        background: #ffffff;
        overflow: hidden;

        h3 {
          display: flex;
          align-items: center;
          width: 100%;
          height: 40px;
          padding-left: 17px;
          background: #ffffff;
          border-bottom: 1px solid #dcdcdc;
          font-weight: 400;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.9);
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .diagnosis-info {
          display: flex;
          flex-direction: column;
          width: 100%;

          .item {
            display: flex;
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #dcdcdc;

            &:last-child {
              border-bottom: none;
            }

            .info-row {
              display: flex;
              width: 50%;
              height: 100%;

              .label {
                display: flex;
                align-items: center;
                width: 90px;
                padding-left: 17px;
                border-right: 1px solid #dcdcdc;
                font-weight: 400;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.6);
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .value {
                display: flex;
                align-items: center;
                width: calc(100% - 90px);
                padding: 0px 15px;
                border-right: 1px solid #dcdcdc;
                font-weight: 400;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.6);
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
      }

      // 历史记录栏
      .history-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: white;
        border-radius: 4px;
        margin-bottom: 15px;
        font-size: 13px;
        color: #595959;

        .history-btn {
          background: none;
          border: none;
          cursor: pointer;
          font-size: 16px;
        }
      }

      // 处方表格区域
      .prescription-section {
        background: white;
        border-radius: 4px;
        margin-bottom: 15px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          background-color: #f8f8f8;
          border-bottom: 1px solid #dcdcdc;

          .section-title {
            display: flex;
            align-items: center;
            height: 52px;
            padding-left: 20px;

            .text1 {
              font-weight: 400;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.9);
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .text2 {
              padding-left: 30px;
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.9);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }

          .header-info {
            display: flex;
            gap: 20px;
            font-size: 12px;
            color: #8c8c8c;
          }

          .header-tabs {
            display: flex;
            gap: 15px;
            font-size: 12px;

            .tab {
              padding: 4px 8px;
              border-radius: 2px;

              &.active {
                background: #e6f7ff;
                color: #1890ff;
              }
            }

            .tab-time,
            .tab-count,
            .tab-dose {
              color: #595959;
            }
          }
        }

        .prescription-table {
          width: 100%;
          border-collapse: collapse;
          font-size: 13px;

          thead {
            background: #fafafa;

            th {
              padding: 10px;
              text-align: left;
              font-weight: 500;
              color: #595959;
              border: 1px solid #f0f0f0;
            }
          }

          tbody {
            tr {
              &:hover {
                background: #fafafa;
              }

              td {
                padding: 10px;
                border: 1px solid #f0f0f0;

                &.highlight {
                  color: #13c2c2;
                  font-weight: 500;
                }

                .tag-blue {
                  color: #1890ff;
                  padding: 2px 6px;
                  background: #e6f7ff;
                  border-radius: 2px;
                }
              }
            }
          }
        }

        // 中药处方样式
        .tcm-prescription {
          border: 1px solid #f0f0f0;
          border-radius: 4px;
          padding: 15px;

          .tcm-info {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 13px;
            color: #595959;
          }

          .tcm-footer {
            display: flex;
            gap: 30px;
            padding-top: 10px;
            border-top: 1px solid #f0f0f0;
            font-size: 13px;
            color: #262626;
          }
        }
      }
    }

    // 右侧信息栏
    .right-sidebar {
      width: 280px;
      padding: 14px 0px;

      .info-card-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background: rgba(253, 253, 253, 0.6);
        border-radius: 0px 0px 12px 12px;
      }

      .info-card {
        border-bottom: 1px solid #f0f0f0;

        .info-card-title {
          display: flex;
          align-items: center;
          width: 100%;
          height: 52px;
          padding-left: 17px;
          border-bottom: 1px solid #e7e7e7;
          font-weight: 400;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.9);
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .cards {
        display: flex;
        flex-direction: column;
        height: 100%;

        .card {
          display: flex;
          flex-direction: column;
          padding: 0px 8px;
          padding-bottom: 0px;
          border-bottom: 1px solid #e7e7e7;

          &.active {
            padding-bottom: 15px;
          }

          .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 42px;
            padding-left: 8px;
            padding-right: 13px;

            .title {
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.9);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .btn {
              width: 16px;
              height: 16px;
              cursor: pointer;
              transform: rotate(180deg);

              &.active {
                transform: rotate(0deg);
              }
            }
          }

          .card-content {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 100%;
            padding: 15px 8px;
            background: #f8f8f8;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #dcdcdc;

            .card-content-item {
              padding: 10px 0px;
              border-bottom: 1px dashed #dcdcdc;

              &:first-child {
                padding-top: 0px;
              }

              &:last-child {
                padding-bottom: 0px;
                border-bottom: none;
              }

              .label {
                font-weight: bold;
                font-size: 11px;
                color: rgba(0, 0, 0, 0.6);
                line-height: 22px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .value {
                font-weight: 400;
                font-size: 11px;
                color: rgba(0, 0, 0, 0.6);
                line-height: 18px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
